<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <!-- 头部盒子 -->
  <header>
    <h1>数据可视化-ECharts</h1>
    <div class="showTime"></div>
    <script>
      var t=null;
      t=setTimeout(time,1000);//开始运行
      function time(){
        clearTimeout(t);//清除定时器
        dt=new Date();
        var y =dt.getFullYear();
        var mt= dt.getMonth()+1;
        var day =dt.getDate();
        var h =dt.getHours();
        var m =dt.getMinutes();
        var s =dt.getSeconds();
        document.querySelector(".showTime").innerHTML=
        '当前时间:'+y+'年'+mt+"月"+day+'日'+'-'+h+'时'+m+'分'+s+'秒';
        t= setTimeout(time,1000)//设定定时器，循环运行
      }

    </script>
  </header>
  <!-- 页面主题部分 -->
  <section class="mainbox">
    <div class="column">
      <div class="panel barLeft">
        <h2>柱形图-就业行业</h2>
        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel lineLeft">
        <h2>
          折线图-人员变化 
          <a href="javascript:;">2020</a>
          <a href="javascript:;">2021</a>
        </h2>
        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel pieLeft">
        <h2>饼图-年龄分布</h2>
        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
    </div>
    <div class="column">
      <!-- no模块制作 -->
      <div class="no">
        <div class="no-header">
          <ul>
            <li>12314</li>
            <li>67895</li>
          </ul>
        </div>
        <div class="no-body">
          <ul>
            <li>前端需求人数</li>
            <li>市场供应人数</li>
          </ul>
        </div>
      </div>
      <!-- 地图模块  -->
      <div class="map">
        <div class="map1"></div>
        <div class="map2"></div>
        <div class="chart"></div>
      </div>
    </div>
    <div class="column">
      <div class="panel barRight">
      <h2>柱形图-技能掌握</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel lineRight">
      <h2>折线图-播放量</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel pieRight">
      <h2>饼图-地区分布</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
  </div>
  </section>
  <script src="js/flexible.js"></script>
  <script src="js/echarts.min.js"></script>
  <!-- 先引入jquery -->
  <script src="js/jquery.min.js"></script>
  <!-- 必须引入china.js这个文件 因为中国地图需要 -->
  <script src="js/china.js"></script>
  <script src="js/index.js"></script>
</body>
</html>